<%--
  Created by IntelliJ IDEA.
  User: brss
  Date: 2017/8/8
  Time: 17:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>${item.title}</title>
    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/blog.css" rel="stylesheet">
    <!-- 高亮 -->
    <link href="/ckeditor/plugins/codesnippet/lib/highlight/styles/default.css" rel="stylesheet">
    <script src="/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
    <script>
        //加载高亮
        hljs.initHighlightingOnLoad();
    </script>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="/imgs/head.png" width="30" class="img-responsive center-block"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="/index">首页 <span class="sr-only"></span></a></li>
                <li><a href="/portal/showMessage">留言板</a></li>
                <li><a href="/portal/showAbout">关于</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>


<div class="container">

    <div class="blog-header">
        <h1 class="blog-title">HyBlog</h1>
        <p class="lead blog-description">学习，生活杂文聚集地。</p>
    </div>

    <div class="row">

        <div class="well">本站通知:本站的第一个测试版本上线，欢迎大家帮忙测试漏洞</div>
        <div class="col-sm-8 blog-main">

                <div class="blog-post well">
                    <a href="/portal/showOneArticle/${item.articleId}"><h2 class="blog-post-title">${item.title}</h2></a>
                    <p class="blog-post-meta"><fmt:formatDate value="${item.pubTime}" pattern="yyyy-MM-dd HH:mm:ss"/> 作者： <a href="#">admin</a></p>
                    <p>${item.summary}</p>
                    <p>${item.content}</p>
                </div><!-- /.blog-post -->

        </div><!-- /.blog-main -->

        <div class="col-sm-3 col-sm-offset-1 blog-sidebar hidden-xs">
            <div class="sidebar-module sidebar-module-inset">
                <h4>关于我</h4>
                <img src="/imgs/head.png" width="150" class="img-responsive center-block">
                <ul>学生，90后java程序员。</ul>
            </div>
            <div class="sidebar-module">
                <h4>分类</h4>
                <ol class="list-unstyled">
                    <c:forEach items="${categories}" var="item">

                        <li><a href="/portal/showArcleFrmCate/${item.categoryId}">${item.categoryName}</a></li>
                    </c:forEach>
                </ol>
            </div>
            <div class="sidebar-module">
                <h4>友情链接</h4>
                <ol class="list-unstyled">
                    <li><a href="#">GitHub</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Facebook</a></li>
                </ol>
            </div>
        </div><!-- /.blog-sidebar -->
    </div><!-- /.row -->
    <c:forEach items="${comments}" var="comment">
        <div class="well">
            <div><span>${comment.nickname }</span>&nbsp;&nbsp;于<fmt:formatDate value="${comment.createTime }" pattern="yyyy-MM-dd HH:mm:ss"/>&nbsp;&nbsp;说：</div>
            <div class="well">
                <span>${comment.commentContent }</span>
            </div>

        </div>
    </c:forEach>
    <!-- 分页插件 -->
    <ul id='bsPager'></ul>
    <textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>
    <div class="pull-right">
        <input type="text" placeholder="请输入你的昵称" id="nickname">
        <input type="text" placeholder="请输入验证码" id="veriCode">
        <img src="/portal/code" id="imgObj" alt="验证码">
        <button type="button" class="btn btn-primary" id="submitCommentBtn">提交</button>
    </div>
</div><!-- /.container -->

<footer class="blog-footer">
    <p>
        <a href="#">Back to top</a>
    </p>
    <p>&copy;2017 &nbsp;&nbsp;HyBlog  版权所有</p>
</footer>

<!-- jquery插件 -->
<script src="/jquery/jquery-3.2.1.min.js"></script>
<!-- bootstrap核心js -->
<script src="/js/bootstrap.min.js"></script>
<!-- 分页插件 -->
<script src="/bootstrap-paginator/bootstrap-paginator.min.js"></script>

<!-- ckeditor富文本编辑器插件 -->
<script type="text/JavaScript" src="/ckeditor/ckeditor.js"></script>
<script>

    $(function () {
        var options = {
            bootstrapMajorVersion:3, //对应的bootstrap版本
            currentPage: ${currentPage }, //当前页数，这里是用的EL表达式，获取从后台传过来的值
            numberOfPages: 5, //每页页数
            totalPages:${totalPages }, //总页数，这里是用的EL表达式，获取从后台传过来的值
            shouldShowPage:true,//是否显示该按钮
            itemTexts: function (type, page, current) {//设置显示的样式，默认是箭头
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },
            //点击事件
            onPageClicked: function (event, originalEvent, type, page) {
                location.href = window.location.pathname+"?page=" + page;
            }
        };
        $("#bsPager").bootstrapPaginator(options);
        //初始化富文本编辑器
        CKEDITOR.replace('TextArea1', {extraPlugins: 'codesnippet', codeSnippet_theme: 'zenburn'}
        );
    });
    $("#imgObj").click(function (e) {
        $("#imgObj").attr('src',"/portal/code?r="+Math.random());
    });
    $("#submitCommentBtn").click(function () {
        if($("#veriCode").val()==""){
            alert("请输入验证码！");
            return;
        }
        $.post("/portal/addComment",
            {
                veriCode:$("#veriCode").val(),
                commentContent:CKEDITOR.instances.TextArea1.getData(),
                nickname:$("#nickname").val(),
                belong:"${item.articleId}",
            },
            function (data) {
                data = $.parseJSON(data);
                alert(data.msg);
                window.location.reload();
            });
    });
</script>
<script src="/js/canvas-nest.min.js"></script>
<script>!function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.getElementsByTagName(n)}function t(){var t=e("script"),o=t.length,i=t[o-1];return{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.7),c:n(i,"color","0,0,255"),n:n(i,"count",200)}}function o(){a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function i(){r.clearRect(0,0,a,c);var n,e,t,o,m,l;s.forEach(function(i,x){for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))}),x(i)}var a,c,u,m=document.createElement("canvas"),d=t(),l="c_n"+d.l,r=m.getContext("2d"),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/45)},w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,window.onmousemove=function(n){n=n||window.event,y.x=n.clientX,y.y=n.clientY},window.onmouseout=function(){y.x=null,y.y=null};for(var s=[],f=0;d.n>f;f++){var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})}u=s.concat([y]),setTimeout(function(){i()},100)}();</script>
</body>
</html>
